<template>
  <div class="info-container">
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane v-for="item in tabs" :label="item.label" :name="item.name" >
        <el-row>
          <el-col v-for="(element,inx) in fields[activeTab]" :span="element.span" style="margin-bottom: 5px">
            <order-info-item :element="element" :values="info" :orderId="orderId"  ></order-info-item>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="产品要求" name="deliver-info">
        <el-row>
          <el-col>
            <remote-array-view :element="deliver.data" :columns="deliver.columns" :orderId="orderId" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="客户要求" name="nodes-info">
        <el-row>
          <el-col>
            <remote-array-view :element="nodes.data" :columns="nodes.columns" :orderId="orderId" />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { fields,tabs,deliver,nodes } from "./config"
import OrderInfoItem from './order-info-item'
import RemoteArrayView from './component/remote-array-view'
export default {
  name: "OrderInfo",
  components:{
    OrderInfoItem,
    RemoteArrayView
  },
  props:{
    info:{
      type:Object,
      required:true
    },
    orderId: Number
  },
  data() {
    return {
      tabs: tabs,
      activeTab:"order-base-info",
      fields:this._.cloneDeep(fields),
      deliver,
      nodes,
      formatInfo:{},

    }
  }
}
</script>

<style scoped>

</style>
